import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        # 侧边栏折叠按钮
        fac.AntdButton(
            fac.AntdIcon(
                id='fold-side-menu-icon',
                icon='antd-menu-fold'
            ),
            id='fold-side-menu',
            size='large',
            type='text',
            style={
                'position': 'fixed',
                'top': '100px',
                'left': 0,
                'zIndex': 99999,
                'padding': '5px 8px',
                'boxShadow': '2px 0 8px #00000026',
                'borderRadius': '0 4px 4px 0',
                'backgroundColor': 'white'
            }
        ),

        fac.AntdRow(
            [
                fac.AntdCol(
                    html.Div(
                        html.Img(
                            src=dash.get_asset_url('logo.png'),
                            style={
                                'height': '50px'
                            }
                        ),
                        style={
                            'height': '100%',
                            'padding': '7px 20px 7px 30px'
                        }
                    )
                ),
                fac.AntdCol(
                    html.Div(
                        fac.AntdText(
                            'XXX智能计算仿真平台',
                            className='title',
                            style={
                                'fontSize': '45px'
                            }
                        ),
                        style={
                            'height': '100%',
                            'display': 'flex',
                            'alignItems': 'center'
                        }
                    )
                ),
                fac.AntdCol(
                    fac.AntdSpace(
                        [
                            fac.AntdTooltip(
                                fac.AntdAvatar(
                                    mode='image',
                                    size=36,
                                    src='/assets/avatar-demo.jpg'
                                ),
                                title='当前用户：费弗里',
                                placement='bottom'
                            ),

                            fac.AntdDropdown(
                                title='个人中心',
                                arrow=True,
                                menuItems=[
                                    {
                                        'title': '基础资料'
                                    },
                                    {
                                        'title': '修改密码'
                                    },
                                    {
                                        'isDivider': True
                                    },
                                    {
                                        'title': '退出登录'
                                    }
                                ],
                                placement='bottomRight',
                                overlayStyle={
                                    'width': '100px'
                                }
                            )
                        ],
                        style={
                            'height': '100%',
                            'float': 'right',
                            'paddingRight': '50px',
                            'display': 'flex',
                            'alignItems': 'center'
                        }
                    ),
                    flex=1
                )
            ],
            style={
                'height': '64px',
                'boxShadow': 'rgb(240 241 242) 0px 2px 14px',
                'background': 'white',
                'marginBottom': '5px',
                'position': 'sticky',
                'top': 0,
                'zIndex': 999
            }
        ),

        fac.AntdRow(
            [
                fac.AntdCol(
                    fac.AntdAffix(
                        html.Div(
                            fac.AntdMenu(
                                menuItems=[
                                    {
                                        'component': 'Item',
                                        'props': {
                                            'key': str(i),
                                            'title': f'页面{i}'
                                        }
                                    }
                                    for i in range(25)
                                ],
                                style={
                                    'width': '100%',
                                }
                            ),
                            id='side-menu',
                            style={
                                'width': '300px',
                                'height': 'calc(100vh - 69px)',
                                'overflowY': 'auto',
                                'transition': 'width 0.2s'
                            }
                        ),
                        offsetTop=69.1
                    ),
                    flex='none'
                ),

                fac.AntdCol(
                    html.Div(
                        [

                            fac.AntdResult(
                                title='结果页示例',
                                subTitle='这是一段结果页示例文字说明',
                                style={
                                    'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                                    'borderRadius': '12px',
                                    'margin': '20px 0px'
                                }
                            )
                        ] * 100,
                        style={
                            'padding': '25px',
                        }
                    ),
                    flex='auto'
                ),

                fac.AntdBackTop(
                    duration=0.5
                )
            ],
            wrap=False,
            style={
                'overflowX': 'hidden'
            }
        )
    ]
)

app.clientside_callback(
    '''
    (nClicks, oldStyle) => {
        if (nClicks) {
            if (oldStyle.width === '300px') {
                return [
                    {
                        'width': 0,
                        'height': 'calc(100vh - 69px)',
                        'overflowY': 'auto',
                        'transition': 'width 0.2s'
                    },
                    'antd-menu-unfold'
                ]
            }
            return [
                {
                    'width': '300px',
                    'height': 'calc(100vh - 69px)',
                    'overflowY': 'auto',
                    'transition': 'width 0.2s'
                },
                'antd-menu-fold'
            ]
        }
        return window.dash_clientside.no_update;
    }
    ''',
    [Output('side-menu', 'style'),
     Output('fold-side-menu-icon', 'icon')],
    Input('fold-side-menu', 'nClicks'),
    State('side-menu', 'style')
)

if __name__ == '__main__':
    app.run_server(debug=True)
